<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>登录界面</title>
    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet"
          href="../../../main/webapp/bootstrap-4.6.2-dist/bootstrap-icons-1.10.5/css/bootstrap.min.css">
    <link rel="stylesheet"
          href="../../../main/webapp/bootstrap-4.6.2-dist/bootstrap-icons-1.10.5/css/bootstrap-grid.min.css">
    <link rel="stylesheet"
          href="../../../main/webapp/bootstrap-4.6.2-dist/bootstrap-icons-1.10.5/css/bootstrap-reboot.min.css">
</head>
<body>
<!--登录表单: ID, 样式[自定义样式/背景/阴影/宽度/内边距/自居中/上外边距]-->
<form id="login-form" class="form bg-white shadow w-25 p-4 mx-auto mt-5">
    <!--标题: 样式[下外边距/内容居中]-->
    <h3 class="mb-5 text-center">Lesson管理系统</h3>
    <!--账号框: 样式[表单组/输入组]-->
    <article class="form-group input-group">
        <!--输入框前缀-->
        <label for="usernameIpt" class="input-group-prepend">
            <!--小图标-->
            <span class="input-group-text bg-white"><i class="bi bi-person-heart"></i></span>
        </label>
        <!--账号框: 类型, 样式[输入控件], ID, 背景提示, 自动焦点-->
        <input type="text" class="form-control" id="usernameIpt" placeholder="Admin Username" autofocus>
    </article>
    <!--密码框: 样式[表单组/输入组]-->
    <article class="form-group input-group">
        <!--输入框前缀-->
        <label for="passwordIpt" class="input-group-prepend">
            <!--小图标-->
            <span class="input-group-text bg-white"><i class="bi bi-shield-lock-fill"></i></span>
        </label>
        <!--密码框: 类型, 样式[输入控件], ID, 背景提示-->
        <input type="password" class="form-control" id="passwordIpt" placeholder="Admin Password">
    </article>
    <!--登录按钮: ID, 类型, 样式[按钮基础样式/区块按钮/文字颜色/下外边距]-->
    <button id="login-btn" type="button" class="btn btn-block text-white mb-4">Login</button>
    <!--链接图标: 样式[内容居中/下外边距]-->
    <article class="text-center mb-1">
        <i class="bi bi-alipay"></i>
        <i class="bi bi-wechat"></i>
        <i class="bi bi-sina-weibo"></i>
        <i class="bi bi-twitter"></i>
        <i class="bi bi-skype"></i>
    </article>

</form>
</body>